<script setup>

import VideoCard from "@/views/index/components/VideoCard.vue";
import {ref,onMounted} from "vue";
import {favoriteApi} from "@/apis/favoriteApi.js";
import {useRoute} from "vue-router";

const route = useRoute();

const params = route.params;

const fav_index = ref('1');
const favorites = ref([]);
const selectedFavorite = ref(favorites.value[0]);

const fetchFavorites = async () => {
  const favoritesRes = await favoriteApi.getCategoryList(params.userid)
  const fetchFavoritesPromises = favoritesRes.map(async favorite => {
    const res = await fetchFavoriteVideos(favorite)
    return {
      ...res.data,
      name: favorite,
    }
  })
  const result = await Promise.all(fetchFavoritesPromises)
  console.log("result",result)
  favorites.value = result;
}

const fetchFavoriteVideos = async (cname) => {
  const res = await favoriteApi.getFavoriteVideos(params.userid,cname)
  console.log('收藏夹视频',cname,res);
  return res;
}

// 控制收藏夹

function selectFavorite(key, keyPath) {
  fav_index.value = `${key}`
  selectedFavorite.value = favorites.value[key]
  console.log(selectedFavorite.value)
}
onMounted( async ()=>{
  await fetchFavorites();
  selectedFavorite.value = favorites.value[0];
});

</script>

<template>
  <div class="main-container">

    <div class="sidebar">
      <div class="sidebar-favorites">
        <el-menu
            :default-active="fav_index"
            class="el-menu-demo"
            mode="vertical"
            @select="selectFavorite"
            :ellipsis="false"
        >
          <div v-for="(favorite, idx) in favorites" :key="idx" class="favorite-item">
            <el-menu-item class="favorite-name" :index="idx">{{ favorite.name }}</el-menu-item>
          </div>
        </el-menu>
        <!--            <el-tabs v-model="fav_index" tab-position="left" @tab-click="selectFavorite(fav_index)">-->
        <!--              <div v-for="(favorite, idx) in favorite" :key="idx" class="favorite-item">-->
        <!--                <el-tab-pane :label="favorite.name" :name="idx" class="favorite-name"></el-tab-pane>-->
        <!--              </div>-->
        <!--            </el-tabs>-->
      </div>
    </div>

    <div class="video-area">
      <div v-if="selectedFavorite">
        <h2>{{ selectedFavorite.name }}</h2>
        <div class="video-grid">
          <VideoCard v-for="(video, idx) in selectedFavorite.videos" :key="idx" :video="video" />
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
.main-container {
  display: flex;
  //height: 100vh;

  .sidebar {
    width: 20%;
    max-width: 300px;
    background-color: white;
    padding: 16px;
    overflow-y: auto;

    .sidebar-favorites {

      .favorite-item {
        margin-bottom: 0;
        border-radius: 5px;
        overflow: hidden;
        //box-shadow: 1px 0 0 0 #409EFF;


        .favorite-name {
          font-size: 18px !important;
          font-weight: 600;
        }
        .el-menu-item.is-active {
          color: #409EFF;
          background-color: #D5ECFE;
        }
      }
    }
  }

  .video-area {
    margin-left: 20px;
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
    width: 65%;

    .video-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      box-shadow: 0 1px 0 0 #e7e7e7;;

      @media screen and (max-width: 1654px) {
        grid-template-columns: repeat(4, 1fr);
      }

      @media screen and (max-width: 1334px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}
</style>
